

/*Infobox*/
:is(
    .is-mobile:not(.is-tablet), 
    .is-mobile .is-live-preview, 
    .is-live-preview :not(.markdown-rendered)
) .callout[data-callout~="infobox"]:not([data-callout-metadata~="mobile"])
{ 
    float: unset !important; 
    max-width: 100%; 
    margin: 0 !important;
    width: auto;
}
.callout.callout[data-callout~="infobox"] {
    // --callout-color: var(--interactive-accent-rgb);
    --callout-color: var(--note, var(--background-primary));
    --callout-padding: 0;
    --callout-content-padding: 5px;
    --callout-margin: 0 0 0 5px;
    background: var(--note, var(--background-primary));
    
    --h1-border-line-height: 0;
    --h2-border-line-height: 0;
    --h3-border-line-height: 0;
    --h4-border-line-height: 0;
    --h5-border-line-height: 0;
    --h6-border-line-height: 0;

    border: 0;
    box-shadow: none;
    width: auto;
    max-width: 300px;
    float: right;
    border-radius: var(--radius-s);

    // & .image-embed.is-loaded { height: 0; }

    //Center collapse Arrow
    & > .callout-title { 
        justify-content: center;
        align-items: center;
        align-self: center; 

        & > .callout-icon { align-self: center; }
    }
    &:not(.is-collapsed) > .callout-title { padding: 0; }
    & .callout-fold { padding-right: 0; }

    &.is-collapsed .callout-fold {
        border: 1px solid var(--hr, var(--background-modifier-border));
        // padding: 5px 10px;
        border-radius: var(--radius-m);
    }
    
    //Display title collapse arrow on hover only
    & > .callout-title .callout-title-inner
    { display: none; }
    & > .callout-title .callout-icon { height: 0; }
    
    // Fixed for export: DO NOT display: none; ON CALLOUT ICON
    &:not(
        [data-callout-metadata~="show-title"], 
        [data-callout-metadata~="s-t"],
        [data-callout-metadata~="show-icon"],
        [data-callout-metadata~="s-i"]
    ) .callout-icon svg { width: 0; height: 0; }

    //Hide Background Color 
    &:not(:hover):not(.is-collapsed) .callout-title 
    { background-color: transparent; }
    

    //Show title
    & .callout-content > .callout[data-callout~="infobox"],
    &:is([data-callout-metadata~="show-title"], [data-callout-metadata~="s-t"]) {
        &:not(:hover):not(.is-collapsed) > .callout-title {
            display: flex;
            gap: 0;
        }
        &.is-collapsed .callout-title {
            border: 1px solid var(--hr, var(--background-modifier-border));
            display: flex;
            align-items: center;
            align-content: center;
        }
        & .callout-title .callout-title-inner {
            display: unset;
            align-items: center;
            align-content: center;
            padding: 5px 10px;
        }
        & .callout-fold {
            margin-top: auto;
            margin-bottom: auto; 
        }

        &.is-collapsed .callout-fold { border: 0; }
    }
    

    //Flush content and add border
    & > .callout-content {
        // --callout-content-padding: 0;
        border: 1px solid var(--table, var(--background-modifier-border));
        margin: 0;
        border-radius: var(--radius-s);
    }
    //Style Tables
    & table { width: 100%; }
    & table td {
        white-space: pre-wrap;
        word-wrap: normal;
        word-break: normal;
    }
    & :is(p, table) {
        margin-block-start: 0;
        margin-block-end: 0;
        margin: 0;
    }
    
    //Resize Headers
    & .callout-content > :is(h1, h2, h3, h4, h5, h6) {
        font-size: 20px;
        text-align: center;
        margin: 0;
        padding: 2px;
        color: var(--text-normal);
        background: var(--outer-bar, var(--background-secondary)); 
    }
    //Image 
    // & p,
    & .internal-embed,
    & img
    { 
        display: block;
        margin: auto;
        padding: auto;
        text-align: center; 
    }

    &[data-callout-metadata][data-callout-metadata][data-callout-metadata~="left"] {
        --callout-margin: 0 5px 0 0;
    }

    //Sub Infobox callout
    & .callout-content > .callout[data-callout~="infobox"] {
        max-width: unset;
        float: unset;
        --callout-margin: 5px 0 0 0;


        & > .callout-title {
            color: var(--text-normal);
            background: var(--outer-bar, var(--background-secondary)); 
            border: 1px solid var(--table, var(--background-modifier-border));
            border-bottom: none;
        }

        & > .callout-content {
            border-top: none;
        }
    }
}


    
.callout.callout[data-callout~="infobox"] {
    //Wikipedia Styling
    &[data-callout-metadata~="wikipedia"] table {
        --table-header-color: var(--text, var(--text-normal));
        --table-header-background: transparent;
        --table-header-background-hover: var(--td, var(--table-background));

        --table-row-background-hover: var(--td, var(--table-background));
        --table-row-alt-background: transparent;
        --table-column-alt-background: transparent;
        --table-border-color: transparent;
        --table-header-border-color: transparent;

        // & tr td { border-top-color: var(--hr); }
        // & tr td { border-top: 1.1px solid var(--hr); }
        & tr:last-child { margin-bottom: 2px; }
    }
    //Wikiwand Styling
    // &[data-callout-metadata~="colors"] :is(h1, h2, h3, h4, h5, h6) {
    //     background-color: var(--accent);
    // }
}

@media print { .callout[data-callout~="infobox"] { max-width: 400px; } }

.theme-light .callout[data-callout~="infobox"][data-callout-metadata~="wikipedia"] {
    --th-text: var(--th);
}

.illusion.illusion .callout[data-callout~="infobox"] 
{
    &.is-collapsed.is-collapsed {
        &[data-callout-metadata~=left] { margin-left: -30px; }
        &[data-callout-metadata~=right] { margin-right: -30px; }   
    }
    
    & [data-heading] {
        --illusion-box-shadow: none;
        --header-shadow: var(--illusion-box-shadow);
        --h1-shadow: var(--header-shadow);
        --h2-shadow: var(--header-shadow);
        --h3-shadow: var(--header-shadow);
        --h4-shadow: var(--header-shadow);
        --h5-shadow: var(--header-shadow);
        --h6-shadow: var(--header-shadow);
    }
}